<template>
    <li class="nearby__conten__item">
        <div class="icon__box"><img :src="item.imgUrl" alt="jpg" class="icon__box__img"></div>
        <div :class="{nearby__conten__item__box:true,item__box__active:showBorder}">
            <p class="nearby__conten__item__box__tlite">{{item.name}}</p>
            <div class="nearby__conten__item__box__introduce">
                <span>月售{{item.sales}}</span>
                <span>起送￥{{item.expressLimit}}</span>
                <span>基础运费￥{{item.expressPrice}}</span>
            </div>
            <p class="nearby__conten__item__box__vip">{{item.slogan}}</p>
        </div>
    </li>
</template>

<script>
export default {
  name: 'NearbyItem',
  props: ['item', 'showBorder']
}
</script>

<style lang="scss" scoped>
@import '../../../style/colorValue.scss';
@import '../../../style/mixinApi.scss';

.nearby__conten__item {
        display: flex;
        margin-bottom: .12rem;
        .item__box__active {
            border:none;
        }
        &__box {
            border-bottom: .01rem solid #f1f1f1;
            flex: 1;
            &__tlite {
                font-size: .16rem;
                line-height: .22rem;
                margin:0 0 .08rem 0;
            }
            &__introduce {
                margin-bottom: .08rem;
            span{
              padding-right: .16rem;
              color: $TextColor;
              @include itemText();
            }
        }
        &__vip {
            margin: 0 0 .12rem 0;
            @include itemText();
            color: #e93b3b;
        }
    }
}
.icon__box {
    width: .56rem;
    height: .56rem;
    margin-right: .16rem;
    &__img {
        width: 100%;
    }
}
</style>
